<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入vue2.0版本 -->
    <script src="../js/vue.js"></script>
    <title>el与data的两种写法</title>
</head>

<body>
    <div id="root">
        <h1>你好，{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false; //以阻止vue在启动时生成生产提示
        // el的两种写法
        /* const x = new Vue({
             // el: '#root',//el第一种写法
             data: {
                 name: '张名师'
             }
         })
         x.$mount('#root') //el第二种写法*/


        //  data的两种写法
        const x = new Vue({
            el: '#root',
            // data: {
            //     name: '张名师' //data第一种写法：对象式
            // }

            data: function () {
                return {
                    name: '张名师' //data的第二种写法：函数式(但是这个函数只能是普通函数，不能是箭头函数，因为this不是vue实例了)
                }
            }
            // 一般我们省略掉function
            // data(){
            //     return{
            //      name:'张名师'
            // }
            // },
        })
    </script>
</body>

</html>